import React, { useState,useEffect } from 'react';
import { Button, Form, Input, message, Modal, Select } from 'antd';
import type {IEditRoles} from '../types/role'
import http from '../api/http'
interface props{
   isModalOpen:boolean,
    handleOk:()=>void,
    handleCancel:()=>void,
    onSuccess:()=>void
}

const Add:React.FC<props>=({isModalOpen,handleCancel,onSuccess})=>{
 const [form] = Form.useForm();
  // 重置表单（弹窗关闭时）
  useEffect(() => {
    if (!isModalOpen) {
      form.resetFields();
    }
  }, [isModalOpen, form]);

  // 提交表单（添加角色）
  const handleSubmit = async () => {
    try {
     
      // 验证表单并获取值
      const values:IEditRoles = await form.validateFields();
      console.log(values)
      // 调用新增接口（假设接口地址为'/roles'）
      http.post("Roles",values).then(res=>{
        if(res.code=='1'){
          message.success('角色添加成功');
      handleCancel(); // 关闭弹窗
      onSuccess(); // 通知父组件刷新列表
        }
      })
      
    
    } catch (error) {
      console.error('添加失败:', error);
      message.error('添加失败，请重试');
    } 
  };

    return <>
     <Modal
      title="添加角色"
      open={isModalOpen}
      onCancel={handleCancel}
      onOk={handleSubmit}
      destroyOnClose // 关闭时销毁表单，避免数据残留
      width={500}
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={{ remark: '',deptId:1,roleId:0 }} // 默认值
      >
          <Form.Item<IEditRoles>
            name="roleId"
            label='编号'
            hidden
            >
         <Input placeholder="编号" />
        </Form.Item>
        {/* 角色名称 */}
        <Form.Item<IEditRoles>
          name="roleName"
          label="角色名称"
          rules={[
            { required: true, message: '请输入角色名称' },
            { max: 50, message: '名称长度不能超过50字' }
          ]}
        >
          <Input placeholder="请输入角色名称" />
        </Form.Item>
    
        <Form.Item
                   name="deptId"
                   label="部门名称"
                   rules={[{ required: true, message: '请选择所部门名称' }]}
                 >
                     <Select placeholder="请选择"  >
                           <Select.Option value={1}>管理部</Select.Option> 
                           <Select.Option value={2}>技术部</Select.Option>               
                         </Select>
                 </Form.Item>
        <Form.Item<IEditRoles>
          name="remark"
          label="备注"
          rules={[{ max: 200, message: '备注长度不能超过200字' }]}
        >
          <Input.TextArea rows={4} placeholder="请输入角色描述（可选）" />
        </Form.Item>
      </Form>
    </Modal>
    </>
}
export {Add}